<template>
  <div>
    <el-container>
      <el-header>
        <el-row>
          <el-col :span="3"
            ><el-button
              class="el-button--primary"
              icon="el-icon-arrow-left"
              @click="goIndex"
            ></el-button
          ></el-col>
          <el-col :span="10">
            <el-menu
              :default-active="activeIndex2"
              class="el-menu-demo2"
              mode="horizontal"
              @select="handleSelect"
              background-color="#FFA07A"
              text-color="#fff"
              active-text-color="#666666"
            >
              <Visit :dialogFormVisible="dialogFormVisible"></Visit>
              <el-submenu index="1">
                <template slot="title">
                  <el-col :span="6">
                    <div class="demo-basic--circle">
                      <div class="block" v-for="size in sizeList" :key="size">
                        <el-avatar :size="size" :src="circleUrl"></el-avatar>
                      </div>
                    </div>
                  </el-col>
                </template>
                <el-menu-item
                  
                  index="2-1"
                  @click="goBackgroundCenter(userId)"
                  >签   到
                </el-menu-item>
                <el-menu-item index="2-2" @click="logout">退   出</el-menu-item>
              </el-submenu>
            </el-menu>
          </el-col>
        </el-row>
      </el-header>
    </el-container>
  </div>
</template>
    
    <script>
import MainMenu from "./MainMenu.vue";
import Visit from "./Visit.vue";
export default {
  data() {
    return {
      dialogFormVisible: {
        show: false,
      },
      circleUrl:
        "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
      sizeList: ["small"],
      user: "",
      staff: "",
      userId: "",
    };
    MainMenu;
  },
  components: { Visit },
  methods: {
    goIndex() {
      this.$router.push("/Index");
    },
    logout() {
      sessionStorage.clear();
      this.$router.push("/");
      this.$message.success("账户已安全退出");
    },
    openVisitDialog() {
      this.dialogFormVisible.show = true;
    },
  },
  created() {},
};
</script>
    <style>
.aaa {
  font-size: 20px;
  color: black;
  text-align: center;
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.hangzhou {
  font-size: 25px;
  color: #808080;
  margin-left: 100px;
}
.xianggang {
  font-size: 25px;
  color: #808080;
  margin-left: 400px;
}
.xian {
  font-size: 25px;
  color: #808080;
  margin-left: 300px;
}
.chongqing {
  font-size: 25px;
  color: #808080;
  margin-left: 330px;
}
.chanpin {
  font-size: 30px;
  text-align: center;
  color: #333;
  font-family: "Courier New", Courier, monospace;
}
.el-header,
.el-footer {
  background-color: #ffa07a;
  color: #333;
  text-align: center;
  line-height: 60px;
}
.el {
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  line-height: 60px;
  width: 60px;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 200px;
}



.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 500px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
  margin-top: 260px;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

.el-button--primary {
  margin-right: 0px;
  background: #ffa07a !important;
  border-color: #ffa07a !important;
}

.el-button--primary:hover {
  background: #ecbd87 !important;
  border-color: #ecbd87 !important;
  color: #fff !important;
}

.el-menu-demo2{
    margin-left: 1000px;
}
</style>